<template>
  <div class="app-container">
    <el-form ref="queryForm" :inline="true">
      <el-form-item>
        <el-button type="success" @click="handleAdd">新增</el-button>
      </el-form-item>
      <!-- <el-button
            type="danger"
            :icon="Delete"
            @click="handleDelete"
            :disabled="multiple"
            >删除</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="queryParams.name"
            placeholder="商品名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-cascader
            v-model="queryParams.categoryId"
            placeholder="商品分类"
            :props="{ emitPath: false }"
            :options="categoryOptions"
            clearable
            style="width: 300px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleQuery"
            >查询</el-button
          >
          <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item> -->
    </el-form>

    <el-table ref="dataTableRef" v-loading="loading" :data="filtertableList" @selection-change="handleSelectionChange"
      @row-click="handleRowClick" border>
      <el-table-column type="selection" min-width="5%" center />
      <el-table-column type="index" label="序号" min-width="15%" center />
      <el-table-column label="工号" prop="workno" min-width="100" />
      <el-table-column label="姓名" prop="name" min-width="100" />
      <el-table-column label="性别" prop="sex" min-width="100">
        <template #default="scope">
          <p v-if="scope.row.sex== 0"> 男</p>
          <p v-if="scope.row.sex == 1"> 女</p>
        </template>
      </el-table-column>
      <el-table-column label="所属学院" prop="departmentName" min-width="100" />



      <el-table-column label="操作" width="120">
        <template #default="scope">
          <el-button type="primary" :icon="Edit" circle plain @click.stop="handleUpdate(scope.row)" />
          <el-button type="danger" :icon="Delete" circle plain @click.stop="handleDelete(scope.row)" />
        </template>
      </el-table-column>
    </el-table>
  </div>

  <!-- 表单弹窗 -->
  <el-dialog :title="dialog.title" v-model="dialog.visible" width="700px">
    <el-form ref="dataFormRef" :model="formData" label-width="100px">
      <el-form-item label="工号" prop="workno">
        <el-input v-model="formData.workno" />
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="formData.name" />
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-radio-group v-model="formData.sex">
          <el-radio :label="0">男</el-radio>
          <el-radio :label="1">女</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script lang="ts" setup>
  import { reactive, ref, onMounted, toRefs, computed } from 'vue';  //导入vue的一些内置方法，v2是全部导入，v3是按需导入
  import { ElTable, ElMessage, ElMessageBox, ElForm } from 'element-plus';  //引入el的一些基础组件
  import { useRouter } from 'vue-router';  //引入路由

  import {
    Search,
    Position,
    Edit,
    Refresh,
    Delete,
    View,
  } from '@element-plus/icons-vue';  //导入图标
  //导入实体形状
  import { PersonnelItem, PersonnelFormData } from '@/types';
  import { Dialog } from '@/types/common';
  //导入api
  import { listPersCounselor, getPersCounselorFormDetail, addPersCounselor, updatePersCounselor, deletePersCounselor } from '@/api/system/persCounselor';
  import { listDepartmentClass } from '@/api/system/departmentClass';
  //导入stroe板块
  import useStore from '@/store'

  const dataTableRef = ref(ElTable);  //暂时算是，控制表格吧
  const dataFormRef = ref(ElForm); //(模态框的控制) 属性名必须和元素的ref属性值一致
  const router = useRouter();  //实例化一个路由对象吧？
  const {user} = useStore();


  //全局用的数据
  const state = reactive({
    // 遮罩层
    loading: true,
    // 选中数组
    ids: [],
    // 非单个禁用
    single: true,
    // 非多个禁用
    multiple: true,
    //弹框
    dialog: {} as Dialog,
    //弹出框表单
    formData: { sex: 0, departmentId: user.departmentId} as PersonnelFormData,
    tableList: [] as PersonnelItem[],
    //班级下拉选项
    classOptions: [] as Array<any>,
  })

  const {
    loading,
    tableList,
    dialog,
    formData,
    classOptions
  } = toRefs(state)  //从这里把数据对象衍射出去，先这样理解先

  const search = ref('')
  //过滤表格数据
  const filtertableList = computed(() =>
    state.tableList.filter(
      (data) =>
        data.roleName == "辅导员"
    )
  )

  //列表查询的方法
  function handleQuery() {
    state.loading = true;  //打开遮罩
    listPersCounselor().then(({ data }) => {
      state.tableList = data;
      state.loading = false;  //关闭遮罩
    }
    )  //初始化数据列表
  }
  //新增
  function handleAdd() {
    loadOptions();  //加载下拉选项
    state.dialog = {
      title: '添加',
      visible: true,
    };
  }
  //编辑
  function handleUpdate(row: any) {
    loadOptions();  //加载下拉选项
    state.dialog = {
      title: '修改',
      visible: true,
    };
    const itemId = row.id || state.ids;
    getPersCounselorFormDetail(itemId).then((response) => {
      state.formData = response.data;
    });
  }
  //删除
  function handleDelete(row: any) {
    const ids = row.id || state.ids.join(',');
    ElMessageBox.confirm('是否确认删除选中的数据项?', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
      .then(function () {
        return deletePersCounselor(ids);
      })
      .then(() => {
        ElMessage.success('删除成功');
        handleQuery();
      });
  }
  //行单击事件
  function handleRowClick(row: any) {
    dataTableRef.value.toggleRowSelection(row);  //单选按钮选中，应该是
  }
  //全选事件？
  function handleSelectionChange(selection: any) {
    state.ids = selection.map((item: { id: any }) => item.id);
    state.single = selection.length != 1;  //单个？
    state.multiple = !selection.length;  //多个？
  }
  //弹框表单提交
  function submitForm() {
    const roleId = state.formData.id;
    if (roleId) {
      updatePersCounselor(roleId, state.formData).then(() => {
        ElMessage.success('修改成功');
        cancel();  //关闭模态框
        handleQuery();  //重新查询表格数据
      });
    } else {
      addPersCounselor(state.formData).then(() => {
        ElMessage.success('新增成功');
        cancel();  //关闭模态框
        handleQuery();   //重新查询表格数据
      });
    }
  }
  //关闭模态框
  function cancel() {
    state.formData.id = undefined;
    dataFormRef.value.resetFields();  //将模块框中的字段重置
    state.dialog.visible = false;  //模态框置为隐藏
  }
  //加载班级下拉框选项数据
  function loadOptions() {
    listDepartmentClass().then(({ data }) => {
      state.classOptions = data;
    });
  }
  //多选删除的方法
  //   function handleDelete(row: any) {
  //   const ids = row.id || state.ids.join(',');
  //   ElMessageBox.confirm('是否确认删除选中的数据项?', '警告', {
  //     confirmButtonText: '确定',
  //     cancelButtonText: '取消',
  //     type: 'warning',
  //   })
  //     .then(function () {
  //       return deleteGoods(ids);
  //     })
  //     .then(() => {
  //       ElMessage.success('删除成功');
  //       handleQuery();
  //     });
  // }








  //vue的生命周期函数，这个生命周期函数，按照字面意思就是，组件安装成功之后，意思是数据呀什么的什么的，都声明好了
  //然后，我在这个组件声明好之后，给表格填入数据
  onMounted(() => {
    handleQuery();  //初始化，给表数据

  });

</script>